<template>
<h2>reactive的使用</h2>
<h3>name:{{user.name}}</h3>
<h3>age:{{user.age}}</h3>
<h3>wife:{{user.wife}}</h3>
<hr>
<button @click="updateUser">更新数据</button>
</template>

<script lang="ts">
//defineComponent函数，目的是定义一个组件，内部可以传入一个配置对象
import { defineComponent, reactive} from 'vue';
export default defineComponent({
  //当前组件的名字是APP
  name: 'App',
  //显示用户的相关信息，点击按钮，可以更新用户的相关顺序
  setup(){

    const obj = {
        name: 'xiaoMing',
      age: 20,
      wife: {
        name:'tt',
        age: 18,
        cars: ['奔驰','宝马','奥迪']

      }      
    }

    //返回的是一个Proxy的代理对象，被代理者是obj中的传入的对象
    const user = reactive(obj)
    //方法
    function updateUser(){
      user.name += '=='
      user.age +=2
      user.wife.name += '++'
      user.wife.age +=2
    }
    return{
      user,
      updateUser

    }
  }

});

</script>